<template>
  <div>
    <div id="lib-edit-header" :class="[windowIsFocus === 1 ? 'window-focus' : 'window-blur']">
      <div id="lib-edit-header-logo">
        <el-icon :size="20">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
            <path
              d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96c-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54c-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16s16 7.16 16 16s-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16s16 7.16 16 16s-7.16 16-16 16z"
              fill="currentColor"></path>
          </svg>
        </el-icon>
        <span>索引编辑</span>
      </div>
      <div id="lib-edit-header-button-group">
        <template v-if="currentTabIndex === 1">
          <el-button :disabled="subindexTableSelection" type="success" size="small" @click="handleSubCreate" link>
            <el-icon :size="24">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
                <g fill="none">
                  <path
                    d="M16 5.268V13a3 3 0 0 1-3 3H5.268A2 2 0 0 0 7 17h6a4 4 0 0 0 4-4V7a2 2 0 0 0-1-1.732zM11.5 9.5a.5.5 0 0 0 0-1h-2v-2a.5.5 0 1 0-1 0v2h-2a.5.5 0 0 0 0 1h2v2a.5.5 0 0 0 1 0v-2h2zM13 3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8zm1 2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5z"
                    fill="currentColor"></path>
                </g>
              </svg>
            </el-icon>
          </el-button>
          <el-button :disabled="subindexTableSelection" type="warning" size="small" @click="handleOpenSubindexLink" link>
            <el-icon :size="24">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                <g fill="none">
                  <path
                    d="M6 8.965a3.5 3.5 0 1 0-1.5-.11v6.29A3.502 3.502 0 0 0 5.5 22a3.5 3.5 0 0 0 .5-6.965V13h6.25A3.75 3.75 0 0 0 16 9.25v-.285a3.5 3.5 0 1 0-1.5-.11v.395a2.25 2.25 0 0 1-2.25 2.25H6V8.965zM7.5 5.5a2 2 0 1 1-4 0a2 2 0 0 1 4 0zm10 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0zm-12 11a2 2 0 1 1 0 4a2 2 0 0 1 0-4zM23 18.75A3.75 3.75 0 0 0 19.25 15l-.102.007a.75.75 0 0 0 .102 1.493l.154.005A2.25 2.25 0 0 1 19.25 21l-.003.005l-.102.007a.75.75 0 0 0 .108 1.493V22.5l.2-.005A3.75 3.75 0 0 0 23 18.75zm-6.5-3a.75.75 0 0 0-.75-.75l-.2.005a3.75 3.75 0 0 0 .2 7.495l.102-.007A.75.75 0 0 0 15.75 21l-.154-.005a2.25 2.25 0 0 1 .154-4.495l.102-.007a.75.75 0 0 0 .648-.743zm3.5 3a.75.75 0 0 0-.75-.75h-3.5l-.102.007a.75.75 0 0 0 .102 1.493h3.5l.102-.007A.75.75 0 0 0 20 18.75z"
                    fill="currentColor"></path>
                </g>
              </svg>
            </el-icon>
          </el-button>
          <el-button :disabled="subindexMap.size === 0" type="primary" size="small" @click="handleSubindexTableSelection"
            link>
            <el-icon :size="24">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
                <g fill="none">
                  <path
                    d="M6.249 5.5a.75.75 0 0 0-.75.75v7.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-7.5a.75.75 0 0 0-.75-.75h-7.5zM5.25 3A2.25 2.25 0 0 0 3 5.25v9.5A2.25 2.25 0 0 0 5.25 17h9.499a2.25 2.25 0 0 0 2.25-2.25v-9.5A2.25 2.25 0 0 0 14.749 3H5.25zM4.5 5.25a.75.75 0 0 1 .75-.75h9.499a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75v-9.5z"
                    fill="currentColor"></path>
                </g>
              </svg>
            </el-icon>
          </el-button>
          <el-button v-show="subindexTableSelection && subindexMap.size > 0" @click="handleSubindexSelectAll"
            :disabled="!subindexTableSelection" size="small" type="primary" link>
            <el-icon :size="24">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                <g fill="none">
                  <path
                    d="M20.496 5.627A2.25 2.25 0 0 1 22 7.75v10A4.25 4.25 0 0 1 17.75 22h-10a2.25 2.25 0 0 1-2.123-1.504l2.097.004H17.75a2.75 2.75 0 0 0 2.75-2.75v-10l-.004-.051V5.627zM17.246 2a2.25 2.25 0 0 1 2.25 2.25v12.997a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 17.247V4.25A2.25 2.25 0 0 1 4.25 2h12.997zM13.47 7.47L9.58 11.358L8.6 10.05a.75.75 0 1 0-1.2.9l1.5 2a.75.75 0 0 0 1.13.08l4.5-4.5a.75.75 0 0 0-1.06-1.06z"
                    fill="currentColor"></path>
                </g>
              </svg>
            </el-icon>
          </el-button>
          <el-button :disabled="!subindexTableSelection || subindexMap.size === 0" type="danger" size="small"
            @click="handleSubIndexListBatchDisassociation" link>
            <el-icon :size="24">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5"></path>
                  <path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5"></path>
                  <path d="M16 21v-2"></path>
                  <path d="M19 16h2"></path>
                  <path d="M3 8h2"></path>
                  <path d="M8 3v2"></path>
                </g>
              </svg>
            </el-icon>
          </el-button>
        </template>
        <template v-else-if="currentTabIndex === 2">
          <el-button :disabled="fileTableSelection" type="success" size="small" @click="handleFileCreate" link>
            <el-icon :size="24">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
                <g fill="none">
                  <path
                    d="M16 5.268V13a3 3 0 0 1-3 3H5.268A2 2 0 0 0 7 17h6a4 4 0 0 0 4-4V7a2 2 0 0 0-1-1.732zM11.5 9.5a.5.5 0 0 0 0-1h-2v-2a.5.5 0 1 0-1 0v2h-2a.5.5 0 0 0 0 1h2v2a.5.5 0 0 0 1 0v-2h2zM13 3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8zm1 2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5z"
                    fill="currentColor"></path>
                </g>
              </svg>
            </el-icon>
          </el-button>
          <el-button :disabled="fileList.length === 0" type="primary" size="small" @click="handleFileSelection" link>
            <el-icon :size="24">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
                <g fill="none">
                  <path
                    d="M6.249 5.5a.75.75 0 0 0-.75.75v7.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-7.5a.75.75 0 0 0-.75-.75h-7.5zM5.25 3A2.25 2.25 0 0 0 3 5.25v9.5A2.25 2.25 0 0 0 5.25 17h9.499a2.25 2.25 0 0 0 2.25-2.25v-9.5A2.25 2.25 0 0 0 14.749 3H5.25zM4.5 5.25a.75.75 0 0 1 .75-.75h9.499a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75v-9.5z"
                    fill="currentColor"></path>
                </g>
              </svg>
            </el-icon>
          </el-button>
          <el-button v-show="fileTableSelection && fileList.length > 0" @click="handleFileSelectAll"
            :disabled="!fileTableSelection" size="small" type="primary" link>
            <el-icon :size="24">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                <g fill="none">
                  <path
                    d="M20.496 5.627A2.25 2.25 0 0 1 22 7.75v10A4.25 4.25 0 0 1 17.75 22h-10a2.25 2.25 0 0 1-2.123-1.504l2.097.004H17.75a2.75 2.75 0 0 0 2.75-2.75v-10l-.004-.051V5.627zM17.246 2a2.25 2.25 0 0 1 2.25 2.25v12.997a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 17.247V4.25A2.25 2.25 0 0 1 4.25 2h12.997zM13.47 7.47L9.58 11.358L8.6 10.05a.75.75 0 1 0-1.2.9l1.5 2a.75.75 0 0 0 1.13.08l4.5-4.5a.75.75 0 0 0-1.06-1.06z"
                    fill="currentColor"></path>
                </g>
              </svg>
            </el-icon>
          </el-button>
          <el-button :disabled="!fileTableSelection || fileList.length === 0" type="danger" size="small"
            @click="handleFileListBatchDisassociation" link>
            <el-icon :size="24">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5"></path>
                  <path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5"></path>
                  <path d="M16 21v-2"></path>
                  <path d="M19 16h2"></path>
                  <path d="M3 8h2"></path>
                  <path d="M8 3v2"></path>
                </g>
              </svg>
            </el-icon>
          </el-button>
        </template>
        <template v-else-if="currentTabIndex === 3">
          <el-button @click="handleSelectImage" type="success" size="small" link>
            <el-icon :size="24">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
                <g fill="none">
                  <path
                    d="M16 5.268V13a3 3 0 0 1-3 3H5.268A2 2 0 0 0 7 17h6a4 4 0 0 0 4-4V7a2 2 0 0 0-1-1.732zM11.5 9.5a.5.5 0 0 0 0-1h-2v-2a.5.5 0 1 0-1 0v2h-2a.5.5 0 0 0 0 1h2v2a.5.5 0 0 0 1 0v-2h2zM13 3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8zm1 2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5z"
                    fill="currentColor"></path>
                </g>
              </svg>
            </el-icon>
          </el-button>
        </template>
        <el-button size="small" @click="handleReset" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
              <path
                d="M27 8H6.83l3.58-3.59L9 3L3 9l6 6l1.41-1.41L6.83 10H27v16H7v-7H5v7a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2z"
                fill="currentColor"></path>
            </svg>
          </el-icon>
        </el-button>
        <el-button type="primary" plain size="small" @click="handleSubmit">
          <el-icon><Select /></el-icon>&nbsp;提交
        </el-button>
      </div>
    </div>
    <div id="lib-edit-aside-tabs" :style="`height:${mainHeight}px;`">
      <div id="lib-edit-aside-tabs-header">
        <div
          :class="[0 === currentTabIndex ? 'lib-edit-aside-tabs-header-tab-active' : 'lib-edit-aside-tabs-header-tab-hover', 'lib-edit-aside-tabs-header-tab']"
          @click="handleSelectTab(0)" style="height:36.5px">
          <p class="lib-edit-aside-tabs-header-tab-title">BASIC</p>
        </div>
        <div
          :class="[1 === currentTabIndex ? 'lib-edit-aside-tabs-header-tab-active' : 'lib-edit-aside-tabs-header-tab-hover', 'lib-edit-aside-tabs-header-tab']"
          @click="handleSelectTab(1)" style="height:58.4px">
          <p class="lib-edit-aside-tabs-header-tab-title">SUBINDEX</p>
        </div>
        <div v-show="type !== 4 && type !== 5"
          :class="[2 === currentTabIndex ? 'lib-edit-aside-tabs-header-tab-active' : 'lib-edit-aside-tabs-header-tab-hover', 'lib-edit-aside-tabs-header-tab']"
          @click="handleSelectTab(2)" style="height:29.2px">
          <p class="lib-edit-aside-tabs-header-tab-title">FILE</p>
        </div>
        <div
          :class="[3 === currentTabIndex ? 'lib-edit-aside-tabs-header-tab-active' : 'lib-edit-aside-tabs-header-tab-hover', 'lib-edit-aside-tabs-header-tab']"
          @click="handleSelectTab(3)" style="height:36.5px">
          <p class="lib-edit-aside-tabs-header-tab-title">COVER</p>
        </div>
        <div
          :class="[4 === currentTabIndex ? 'lib-edit-aside-tabs-header-tab-active' : 'lib-edit-aside-tabs-header-tab-hover', 'lib-edit-aside-tabs-header-tab']"
          @click="handleSelectTab(4)" style="height:29.2px">
          <p class="lib-edit-aside-tabs-header-tab-title">DESC</p>
        </div>
      </div>
      <div
        :class="[currentTabIndex === 0 ? 'lib-edit-aside-current-tab-pane' : 'lib-edit-aside-uncurrent-tab-pane', 'lib-edit-aside-tab-pane']">
        <div id="lib-edit-base-form" :style="`height: ${mainHeight - 15}px;`">
          <div class="lib-edit-base-form-item">
            <p class="lib-edit-base-form-item-title">索引主标题</p>
            <el-input v-model="title" placeholder="Approved by" size="small" />
          </div>
          <div class="lib-edit-base-form-item">
            <p class="lib-edit-base-form-item-title">索引副标题</p>
            <el-input v-model="subtitle" placeholder="Approved by" size="small" />
          </div>
          <div class="lib-edit-base-form-item">
            <p class="lib-edit-base-form-item-title">作者</p>
            <el-select class="lib-edit-base-form-item-select" v-model="authorList" multiple filterable allow-create
              default-first-option @change="createTag(1, $event)" :reserve-keyword="false" placeholder="输入作者"
              size="small">
              <el-option v-for="(item, index) in authorOptions" :key="index" :label="item.label" :value="item.value"
                :disabled="item.disabled" />
            </el-select>
          </div>
          <div class="lib-edit-base-form-item">
            <p class="lib-edit-base-form-item-title">选择标签</p>
            <el-select class="lib-edit-base-form-item-select" v-model="tagList" multiple filterable allow-create
              default-first-option @change="createTag(0, $event)" :reserve-keyword="false" placeholder="输入关键词"
              size="small">
              <el-option v-for="(item, index) in tagOptions" :key="index" :label="item.label" :value="item.value"
                :disabled="item.disabled" />
            </el-select>
          </div>
          <div class="lib-edit-base-form-item">
            <div class="lib-edit-base-form-item-group">
              <div>
                <p class="lib-edit-base-form-item-title">索引类型</p>
                <el-dropdown :disabled="isDropdownDisabled" trigger="click" @command="handleTypeChange">
                  <div class="lib-edit-base-form-item-dropdown-menu">
                    <!-- <span v-if="type === 0">
                                            <el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
                                                    <path
                                                        d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494zM402 549c0 5.4 4.4 9.5 9.8 9.5h32.4c5.4 0 9.8-4.2 9.8-9.4c0-28.2 25.8-51.6 58-51.6s58 23.4 58 51.5c0 25.3-21 47.2-49.3 50.9c-19.3 2.8-34.5 20.3-34.7 40.1v32c0 5.5 4.5 10 10 10h32c5.5 0 10-4.5 10-10v-12.2c0-6 4-11.5 9.7-13.3c44.6-14.4 75-54 74.3-98.9c-.8-55.5-49.2-100.8-108.5-101.6c-61.4-.7-111.5 45.6-111.5 103zm78 195a32 32 0 1 0 64 0a32 32 0 1 0-64 0z"
                                                        fill="currentColor"></path>
                                                </svg></el-icon><span>未知&emsp;</span></span> -->
                    <span v-if="type === 1">
                      <el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
                          <g fill="none">
                            <path
                              d="M8.765 7.076A.5.5 0 0 0 8 7.5v5.15a.5.5 0 0 0 .776.417l4-2.649a.5.5 0 0 0-.01-.84l-4-2.502zM4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h11a2.5 2.5 0 0 0 2.5-2.5v-9A2.5 2.5 0 0 0 15.5 3h-11zM3 5.5A1.5 1.5 0 0 1 4.5 4h11A1.5 1.5 0 0 1 17 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9z"
                              fill="currentColor"></path>
                          </g>
                        </svg></el-icon><span>视频&emsp;</span></span>
                    <span v-else-if="type === 2">
                      <el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 512">
                          <path
                            d="M608 0H160a32 32 0 0 0-32 32v96h160V64h192v320h128a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zM232 103a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm352 208a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm-168 57H32a32 32 0 0 0-32 32v288a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32V192a32 32 0 0 0-32-32zM96 224a32 32 0 1 1-32 32a32 32 0 0 1 32-32zm288 224H64v-32l64-64l32 32l128-128l96 96z"
                            fill="currentColor"></path>
                        </svg></el-icon><span>视频集</span></span>
                    <span v-else-if="type === 3">
                      <el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                          <path d="M22 18V2H6v16h16zm-11-6l2.03 2.71L16 11l4 5H8l3-4zM2 6v16h16v-2H4V6H2z"
                            fill="currentColor">
                          </path>
                        </svg></el-icon><span>图片&emsp;</span></span>
                    <span v-else-if="type === 4">
                      <el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
                          <g fill="none">
                            <path
                              d="M6.5 10a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zM4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3H6zm5.5 4h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5z"
                              fill="currentColor"></path>
                          </g>
                        </svg></el-icon><span>文本&emsp;</span></span>
                    <span v-else-if="type === 5">
                      <el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                          <g fill="none">
                            <path
                              d="M7.75 11.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5zM7 15.25a.75.75 0 1 1 1.5 0a.75.75 0 0 1-1.5 0zm3-3a.75.75 0 0 1 .75-.75h3.054a.75.75 0 0 1 0 1.5H10.75a.75.75 0 0 1-.75-.75zm.75 2.25a.75.75 0 0 0 0 1.5h3.054a.75.75 0 0 0 0-1.5H10.75zM6.25 2A2.25 2.25 0 0 0 4 4.25v13a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25V8.869a2.25 2.25 0 0 0-.659-1.591l-4.619-4.619A2.25 2.25 0 0 0 10.632 2H6.25zM5.5 4.25a.75.75 0 0 1 .75-.75h4.254v3.248a2.25 2.25 0 0 0 2.25 2.25H16v8.252a.75.75 0 0 1-.75.75h-9a.75.75 0 0 1-.75-.75v-13zm6.504 2.498V4.562l2.935 2.936h-2.185a.75.75 0 0 1-.75-.75zM8.75 22a2.25 2.25 0 0 1-2.122-1.5h8.622a3.25 3.25 0 0 0 3.25-3.25V8.937l.84.84c.423.423.66.995.66 1.592v5.881A4.75 4.75 0 0 1 15.25 22h-6.5z"
                              fill="currentColor"></path>
                          </g>
                        </svg></el-icon><span>文集&emsp;</span></span>
                    <span v-else><el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
                          <path
                            d="M83 384c-13-33-35-93.37-35-128C48 141.12 149.33 48 256 48s208 93.12 208 208c0 34.63-23 97-35 128"
                            fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="32">
                          </path>
                          <path
                            d="M108.39 270.13l-13.69 8h0c-30.23 17.7-31.7 72.41-3.38 122.2s75.87 75.81 106.1 58.12h0l13.69-8a16.16 16.16 0 0 0 5.78-21.87L130 276a15.74 15.74 0 0 0-21.61-5.87z"
                            fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32">
                          </path>
                          <path
                            d="M403.61 270.13l13.69 8h0c30.23 17.69 31.74 72.4 3.38 122.19s-75.87 75.81-106.1 58.12h0l-13.69-8a16.16 16.16 0 0 1-5.78-21.87L382 276a15.74 15.74 0 0 1 21.61-5.87z"
                            fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32">
                          </path>
                        </svg></el-icon><span>音频&emsp;</span></span>
                    <el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 24 24">
                        <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z" fill="currentColor">
                        </path>
                      </svg></el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <!-- <el-dropdown-item :command="0"><el-icon :size="16"><svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
                                                        <path
                                                            d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494zM402 549c0 5.4 4.4 9.5 9.8 9.5h32.4c5.4 0 9.8-4.2 9.8-9.4c0-28.2 25.8-51.6 58-51.6s58 23.4 58 51.5c0 25.3-21 47.2-49.3 50.9c-19.3 2.8-34.5 20.3-34.7 40.1v32c0 5.5 4.5 10 10 10h32c5.5 0 10-4.5 10-10v-12.2c0-6 4-11.5 9.7-13.3c44.6-14.4 75-54 74.3-98.9c-.8-55.5-49.2-100.8-108.5-101.6c-61.4-.7-111.5 45.6-111.5 103zm78 195a32 32 0 1 0 64 0a32 32 0 1 0-64 0z"
                                                            fill="currentColor"></path>
                                                    </svg></el-icon><span>未知</span></el-dropdown-item> -->
                      <el-dropdown-item :command="1"><el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
                            <g fill="none">
                              <path
                                d="M8.765 7.076A.5.5 0 0 0 8 7.5v5.15a.5.5 0 0 0 .776.417l4-2.649a.5.5 0 0 0-.01-.84l-4-2.502zM4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h11a2.5 2.5 0 0 0 2.5-2.5v-9A2.5 2.5 0 0 0 15.5 3h-11zM3 5.5A1.5 1.5 0 0 1 4.5 4h11A1.5 1.5 0 0 1 17 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9z"
                                fill="currentColor"></path>
                            </g>
                          </svg></el-icon><span>视频</span></el-dropdown-item>
                      <el-dropdown-item :command="2"><el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 512">
                            <path
                              d="M608 0H160a32 32 0 0 0-32 32v96h160V64h192v320h128a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zM232 103a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm352 208a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm-168 57H32a32 32 0 0 0-32 32v288a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32V192a32 32 0 0 0-32-32zM96 224a32 32 0 1 1-32 32a32 32 0 0 1 32-32zm288 224H64v-32l64-64l32 32l128-128l96 96z"
                              fill="currentColor"></path>
                          </svg></el-icon><span>视频集</span></el-dropdown-item>
                      <el-dropdown-item :command="3"><el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                            <path d="M22 18V2H6v16h16zm-11-6l2.03 2.71L16 11l4 5H8l3-4zM2 6v16h16v-2H4V6H2z"
                              fill="currentColor"></path>
                          </svg></el-icon><span>图片</span></el-dropdown-item>
                      <el-dropdown-item :command="4"><el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
                            <g fill="none">
                              <path
                                d="M6.5 10a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zM4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3H6zm5.5 4h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5z"
                                fill="currentColor"></path>
                            </g>
                          </svg></el-icon><span>文本</span></el-dropdown-item>
                      <el-dropdown-item :command="5"><el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                            <g fill="none">
                              <path
                                d="M7.75 11.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5zM7 15.25a.75.75 0 1 1 1.5 0a.75.75 0 0 1-1.5 0zm3-3a.75.75 0 0 1 .75-.75h3.054a.75.75 0 0 1 0 1.5H10.75a.75.75 0 0 1-.75-.75zm.75 2.25a.75.75 0 0 0 0 1.5h3.054a.75.75 0 0 0 0-1.5H10.75zM6.25 2A2.25 2.25 0 0 0 4 4.25v13a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25V8.869a2.25 2.25 0 0 0-.659-1.591l-4.619-4.619A2.25 2.25 0 0 0 10.632 2H6.25zM5.5 4.25a.75.75 0 0 1 .75-.75h4.254v3.248a2.25 2.25 0 0 0 2.25 2.25H16v8.252a.75.75 0 0 1-.75.75h-9a.75.75 0 0 1-.75-.75v-13zm6.504 2.498V4.562l2.935 2.936h-2.185a.75.75 0 0 1-.75-.75zM8.75 22a2.25 2.25 0 0 1-2.122-1.5h8.622a3.25 3.25 0 0 0 3.25-3.25V8.937l.84.84c.423.423.66.995.66 1.592v5.881A4.75 4.75 0 0 1 15.25 22h-6.5z"
                                fill="currentColor"></path>
                            </g>
                          </svg></el-icon><span>文集</span></el-dropdown-item>
                      <el-dropdown-item :command="6"><el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
                            <path
                              d="M83 384c-13-33-35-93.37-35-128C48 141.12 149.33 48 256 48s208 93.12 208 208c0 34.63-23 97-35 128"
                              fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                              stroke-width="32"></path>
                            <path
                              d="M108.39 270.13l-13.69 8h0c-30.23 17.7-31.7 72.41-3.38 122.2s75.87 75.81 106.1 58.12h0l13.69-8a16.16 16.16 0 0 0 5.78-21.87L130 276a15.74 15.74 0 0 0-21.61-5.87z"
                              fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32">
                            </path>
                            <path
                              d="M403.61 270.13l13.69 8h0c30.23 17.69 31.74 72.4 3.38 122.19s-75.87 75.81-106.1 58.12h0l-13.69-8a16.16 16.16 0 0 1-5.78-21.87L382 276a15.74 15.74 0 0 1 21.61-5.87z"
                              fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32">
                            </path>
                          </svg></el-icon><span>音频</span></el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div>
                <p class="lib-edit-base-form-item-title">索引状态</p>
                <el-dropdown trigger="click" @command="handleStateChange">
                  <div class="lib-edit-base-form-item-dropdown-menu">
                    <span v-if="state === 0">
                      <el-icon :size="16">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                          viewBox="0 0 24 24">
                          <g fill="none">
                            <path
                              d="M16.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zM12 1.5A3.5 3.5 0 0 1 15.5 5h5a1 1 0 1 1 0 2h-.845l-.451 4.587A6.5 6.5 0 0 0 11.81 22H8.312a2.75 2.75 0 0 1-2.737-2.48L4.345 7H3.5a1 1 0 0 1 0-2h5A3.5 3.5 0 0 1 12 1.5zm1.716 13.089l-.07.057l-.057.07a.5.5 0 0 0 0 .568l.057.07l2.147 2.146l-2.147 2.146l-.057.07a.5.5 0 0 0 0 .568l.057.07l.07.057a.5.5 0 0 0 .568 0l.07-.057l2.146-2.147l2.146 2.147l.07.057a.5.5 0 0 0 .568 0l.07-.057l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-2.147-2.146l2.147-2.146l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-.07-.057a.5.5 0 0 0-.568 0l-.07.057l-2.146 2.147l-2.146-2.147l-.07-.057a.5.5 0 0 0-.492-.044l-.076.044zM12 3.5A1.5 1.5 0 0 0 10.5 5h3A1.5 1.5 0 0 0 12 3.5z"
                              fill="currentColor"></path>
                          </g>
                        </svg>
                      </el-icon>
                      <span>已删除</span>
                    </span>
                    <span v-else-if="state === 1">
                      <el-icon :size="16">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                          viewBox="0 0 512 512">
                          <path
                            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69L432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
                            fill="currentColor"></path>
                        </svg>
                      </el-icon>
                      <span>正常&emsp;</span>
                    </span>
                    <span v-else-if="state === 2">
                      <el-icon :size="16">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                          viewBox="0 0 32 32">
                          <path d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12z"
                            fill="currentColor"></path>
                          <path d="M15 8h2v11h-2z" fill="currentColor"></path>
                          <path d="M16 22a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 22z" fill="currentColor"></path>
                        </svg>
                      </el-icon>
                      <span>未审核</span>
                    </span>
                    <span v-else-if="state === 3">
                      <el-icon :size="16">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                          viewBox="0 0 576 512">
                          <path
                            d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144a143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79a47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
                            fill="currentColor"></path>
                        </svg>
                      </el-icon>
                      <span>审核中</span>
                    </span>
                    <el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 24 24">
                        <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z" fill="currentColor">
                        </path>
                      </svg>
                    </el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item :command="0">
                        <el-icon :size="16">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            viewBox="0 0 24 24">
                            <g fill="none">
                              <path
                                d="M16.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zM12 1.5A3.5 3.5 0 0 1 15.5 5h5a1 1 0 1 1 0 2h-.845l-.451 4.587A6.5 6.5 0 0 0 11.81 22H8.312a2.75 2.75 0 0 1-2.737-2.48L4.345 7H3.5a1 1 0 0 1 0-2h5A3.5 3.5 0 0 1 12 1.5zm1.716 13.089l-.07.057l-.057.07a.5.5 0 0 0 0 .568l.057.07l2.147 2.146l-2.147 2.146l-.057.07a.5.5 0 0 0 0 .568l.057.07l.07.057a.5.5 0 0 0 .568 0l.07-.057l2.146-2.147l2.146 2.147l.07.057a.5.5 0 0 0 .568 0l.07-.057l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-2.147-2.146l2.147-2.146l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-.07-.057a.5.5 0 0 0-.568 0l-.07.057l-2.146 2.147l-2.146-2.147l-.07-.057a.5.5 0 0 0-.492-.044l-.076.044zM12 3.5A1.5 1.5 0 0 0 10.5 5h3A1.5 1.5 0 0 0 12 3.5z"
                                fill="currentColor"></path>
                            </g>
                          </svg>
                        </el-icon>
                        <span>已删除</span>
                      </el-dropdown-item>
                      <el-dropdown-item :command="1">
                        <el-icon :size="16">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            viewBox="0 0 512 512">
                            <path
                              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69L432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
                              fill="currentColor"></path>
                          </svg>
                        </el-icon>
                        <span>正常&emsp;</span>
                      </el-dropdown-item>
                      <el-dropdown-item :command="2">
                        <el-icon :size="16">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            viewBox="0 0 32 32">
                            <path d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12z"
                              fill="currentColor"></path>
                            <path d="M15 8h2v11h-2z" fill="currentColor"></path>
                            <path d="M16 22a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 22z" fill="currentColor"></path>
                          </svg>
                        </el-icon>
                        <span>未审核</span>
                      </el-dropdown-item>
                      <el-dropdown-item :command="3">
                        <el-icon :size="16">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            viewBox="0 0 576 512">
                            <path
                              d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144a143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79a47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
                              fill="currentColor"></path>
                          </svg>
                        </el-icon>
                        <span>审核中</span>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div>
                <p class="lib-edit-base-form-item-title">创作时间</p>
                <el-date-picker v-model="releaseDate" type="datetime" placeholder="发布时间" size="small" />
              </div>
              <div>
                <p class="lib-edit-base-form-item-title">评分</p>
                <el-rate class="lib-edit-base-form-item-rate" v-model="rate" style="width: 100%;" size="large"
                  allow-half />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        :class="[currentTabIndex === 1 ? 'lib-edit-aside-current-tab-pane' : 'lib-edit-aside-uncurrent-tab-pane', 'lib-edit-aside-tab-pane']">
        <div class="lib-edit-table" :style="`height: ${mainHeight}px;`">
          <template v-for="(item, index) in subindexMap.values()" :key="index">
            <div :class="[item.link ? 'lib-edit-table-row-lock' : 'lib-edit-table-row-hover', 'lib-edit-table-row-box']">
              <div :class="[item.link ? 'lib-edit-table-row-lock' : 'lib-edit-table-row-hover', 'lib-edit-table-row']"
                v-on:dblclick="indexNameDetail(item)">
                <span class="lib-edit-table-row-main">
                  <el-checkbox :model-value="subindexTableSelectIdSet.has(item.id)" v-show="subindexTableSelection"
                    size="small" @change="handleSubindexSelect($event, item.id)" />
                  <n-ellipsis class="lib-edit-table-row-value" :line-clamp="1">
                    {{ item.title }}</n-ellipsis>
                </span>
                <el-button :disabled="subindexTableSelection" @click="handleSubindexDisassociation(item)" type="danger"
                  link>
                  <el-icon :size="24">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      viewBox="0 0 24 24">
                      <g fill="none">
                        <path
                          d="M6.502 3.003a3.5 3.5 0 0 0-3.5 3.5v6a3.5 3.5 0 0 0 3.5 3.5H7v-2h-.497a1.5 1.5 0 0 1-1.5-1.5v-6a1.5 1.5 0 0 1 1.5-1.5h6a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-1.5 1.5h-1.506v2h1.506a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 0 0-3.5-3.5h-6zM10 11.5a1.5 1.5 0 0 1 1.5-1.5h1.499V8H11.5A3.5 3.5 0 0 0 8 11.5v6a3.5 3.5 0 0 0 3.5 3.5h6a3.5 3.5 0 0 0 3.5-3.5v-6A3.5 3.5 0 0 0 17.5 8h-.495v2h.495a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-1.5 1.5h-6a1.5 1.5 0 0 1-1.5-1.5v-6z"
                          fill="currentColor"></path>
                      </g>
                    </svg>
                  </el-icon>
                </el-button>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div
        :class="[currentTabIndex === 2 ? 'lib-edit-aside-current-tab-pane' : 'lib-edit-aside-uncurrent-tab-pane', 'lib-edit-aside-tab-pane']">
        <div class="lib-edit-table" :style="`height: ${mainHeight}px;`">
          <template v-for="(item, index) in fileList" :key="index">
            <div class="lib-edit-table-row-hover lib-edit-table-row-box">
              <div class="lib-edit-table-row-hover lib-edit-table-row" v-on:dblclick="fileNameDetail(item)">
                <span class="lib-edit-table-row-main">
                  <el-checkbox v-show="fileTableSelection" size="small" :model-value="fileTableSelectIndexSet.has(index)"
                    @change="handleFileSelect($event, index)" />

                  <n-ellipsis class="lib-edit-table-row-value" :line-clamp="1">
                    {{ item.dir + '\\' + item.name + item.ext }}
                  </n-ellipsis>
                </span>
                <div class="lib-edit-table-row-button-group">
                  <el-button @click="handleFileSeqUp(index)" type="primary" :disabled="fileTableSelection" size="small"
                    link>
                    <el-icon :size="24">
                      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
                        <path d="M412.6,227.1L278.6,89c-5.8-6-13.7-9-22.4-9h-0.4c-8.7,0-16.6,3-22.4,9l-134,138.1c-12.5,12-12.5,31.3,0,43.2
	c12.5,11.9,32.7,11.9,45.2,0l79.4-83v214c0,16.9,14.3,30.6,32,30.6c18,0,32-13.7,32-30.6v-214l79.4,83c12.5,11.9,32.7,11.9,45.2,0
	C425.1,258.4,425.1,239.1,412.6,227.1z"></path>
                      </svg>
                    </el-icon>
                  </el-button>
                  <el-button @click="handleFileSeqDown(index)" type="primary" :disabled="fileTableSelection" size="small"
                    link>
                    <el-icon :size="24">
                      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
                        <path d="M99.4,284.9l134,138.1c5.8,6,13.7,9,22.4,9h0.4c8.7,0,16.6-3,22.4-9l134-138.1c12.5-12,12.5-31.3,0-43.2
	c-12.5-11.9-32.7-11.9-45.2,0l-79.4,83v-214c0-16.9-14.3-30.6-32-30.6c-18,0-32,13.7-32,30.6v214l-79.4-83
	c-12.5-11.9-32.7-11.9-45.2,0C86.9,253.6,86.9,272.9,99.4,284.9z"></path>
                      </svg>
                    </el-icon>
                  </el-button>
                  <el-button :disabled="fileTableSelection" @click="handleFileDisassociation(index)" type="danger" link>
                    <el-icon :size="24">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 24 24">
                        <g fill="none">
                          <path
                            d="M6.502 3.003a3.5 3.5 0 0 0-3.5 3.5v6a3.5 3.5 0 0 0 3.5 3.5H7v-2h-.497a1.5 1.5 0 0 1-1.5-1.5v-6a1.5 1.5 0 0 1 1.5-1.5h6a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-1.5 1.5h-1.506v2h1.506a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 0 0-3.5-3.5h-6zM10 11.5a1.5 1.5 0 0 1 1.5-1.5h1.499V8H11.5A3.5 3.5 0 0 0 8 11.5v6a3.5 3.5 0 0 0 3.5 3.5h6a3.5 3.5 0 0 0 3.5-3.5v-6A3.5 3.5 0 0 0 17.5 8h-.495v2h.495a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-1.5 1.5h-6a1.5 1.5 0 0 1-1.5-1.5v-6z"
                            fill="currentColor"></path>
                        </g>
                      </svg>
                    </el-icon>
                  </el-button>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div
        :class="[currentTabIndex === 3 ? 'lib-edit-aside-current-tab-pane' : 'lib-edit-aside-uncurrent-tab-pane', 'lib-edit-aside-tab-pane']">
        <div id="lib-edit-cover-box">
          <ul ref="RefImgList" id="lib-edit-cover-box-list" class="el-upload-list el-upload-list--picture-card">
            <template v-for="(item, index) in coverList" :key="index">
              <li class="el-upload-list__item">
                <el-image class="el-upload-list__item-thumbnail" :src="item.dir + '\\' + item.name + item.ext"
                  :preview-src-list="[item.dir + '\\' + item.name + item.ext]" />
                <span class="el-upload-list__item-actions">
                  <el-icon @click="handleCoverPreview(index)">
                    <ZoomIn />
                  </el-icon>
                  <el-icon @click="handleCoverDelete(index)">
                    <Delete />
                  </el-icon>
                  <el-icon @click="handleCoverSeqUp(index)">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
                      <path d="M412.6,227.1L278.6,89c-5.8-6-13.7-9-22.4-9h-0.4c-8.7,0-16.6,3-22.4,9l-134,138.1c-12.5,12-12.5,31.3,0,43.2
	c12.5,11.9,32.7,11.9,45.2,0l79.4-83v214c0,16.9,14.3,30.6,32,30.6c18,0,32-13.7,32-30.6v-214l79.4,83c12.5,11.9,32.7,11.9,45.2,0
	C425.1,258.4,425.1,239.1,412.6,227.1z"></path>
                    </svg>
                  </el-icon>
                  <el-icon @click="handleCoverSeqDown(index)">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
                      <path d="M99.4,284.9l134,138.1c5.8,6,13.7,9,22.4,9h0.4c8.7,0,16.6-3,22.4-9l134-138.1c12.5-12,12.5-31.3,0-43.2
	c-12.5-11.9-32.7-11.9-45.2,0l-79.4,83v-214c0-16.9-14.3-30.6-32-30.6c-18,0-32,13.7-32,30.6v214l-79.4-83
	c-12.5-11.9-32.7-11.9-45.2,0C86.9,253.6,86.9,272.9,99.4,284.9z"></path>
                    </svg>
                  </el-icon>
                </span>
              </li>
            </template>
          </ul>
        </div>
      </div>
      <div
        :class="[currentTabIndex === 4 ? 'lib-edit-aside-current-tab-pane' : 'lib-edit-aside-uncurrent-tab-pane', 'lib-edit-aside-tab-pane']">
        <el-input id="lib-edit-description" v-model="description" resize="none" :show-word-limit="false" type="textarea"
          placeholder="" size="small" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  beforeCreate() {
    window.electronAPI.windowBlur((_event, value) => {
      if (value === 0) this.windowIsFocus = 0
    })
    window.electronAPI.windowFocus((_event, value) => {
      if (value === 1) this.windowIsFocus = 1
    })
    window.onbeforeunload = () => {
      $MyLibWindowCommunication.close()
    }
  },
  created() {
    $MyLibDbc.tag.getAll().then(res => {
      res.forEach(val => {
        const tag = { value: val.id, label: val.text.toString(), disabled: val.state === 0 }
        this.tagIdSet.add(val.id)
        val.type === 1 ? this.authorOptions.push(tag) : this.tagOptions.push(tag)
      })
    })
    if ($UrlQuery.is_subindex === 1) {
      this.isSubindex = true
      if ($UrlQuery.type == 0)
        this.isDropdownDisabled = false
      else {
        this.isDropdownDisabled = true
        this.type = $UrlQuery.type
      }
    }
  },
  beforeMount() {
    this.$nextTick(() => {
      this.mainHeight = document.body.offsetHeight - 33
      window.addEventListener('resize', () => {
        this.mainHeight = document.body.offsetHeight - 33
      })
    })
  },
  methods: {
    handleSelectTab(index) {
      this.currentTabIndex = index
    },
    handleTypeChange(type) {
      this.type = type
    },
    handleStateChange(state) {
      this.state = state
    },
    async handleSubmit() {
      const subindexRelationshipSet = new Set()
      const coverRelationshipList = []
      const fileRelationshipList = []
      const tagRelationshipSet = new Set()
      const entity = new IndexEntity(
        this.title.toString(),
        this.subtitle.toString(),
        this.description.toString(),
        this.releaseDate.getTime(),
        new Date().getTime(),
        0,
        this.state,
        this.type,
        this.rate
      )
      const indexId = await $MyLibDbc.index.insert(entity)

      // coverList
      for (let i = 0; i < this.coverList.length; i++) {
        const item = this.coverList[i];
        const file = await $MyLibDbc.file.getByIndex("dirNameExt", [item.dir, item.name, item.ext], true)
        if (file)
          coverRelationshipList.push(new IndexCoverRelationship(indexId, file.id, i))
        else {
          const id = await $MyLibDbc.file.insert(item)
          coverRelationshipList.push(new IndexCoverRelationship(indexId, id, i))
        }
      }
      // fileList
      for (let i = 0; i < this.fileList.length; i++) {
        const item = this.fileList[i];
        const file = await $MyLibDbc.file.getByIndex("dirNameExt", [item.dir, item.name, item.ext], true)
        if (file)
          fileRelationshipList.push(new IndexFileRelationship(indexId, file.id, i))
        else {
          const id = await $MyLibDbc.file.insert(item)
          fileRelationshipList.push(new IndexFileRelationship(indexId, id, i))
        }
      }
      for (const id of this.tagSet)
        tagRelationshipSet.add(new IndexTagRelationship(indexId, id))
      for (const id of this.authorSet)
        tagRelationshipSet.add(new IndexTagRelationship(indexId, id))
      for (const id of this.subindexMap.keys())
        subindexRelationshipSet.add(new IndexSubIndexRelationship(indexId, id))
      await $MyLibDbc.index_tag_relationship.batchInsert(tagRelationshipSet)
      await $MyLibDbc.index_file_relationship.batchInsert(fileRelationshipList)
      await $MyLibDbc.index_cover_relationship.batchInsert(coverRelationshipList)
      await $MyLibDbc.index_subindex_relationship.batchInsert(subindexRelationshipSet)
      $MyLibWindowCommunication.sendToParentAndClose(entity)
    },
    handleReset() {
      switch (this.currentTabIndex) {
        case 0:
          this.authorList = []
          this.authorSet = new Set()
          this.tagList = []
          this.tagSet = new Set()
          this.state = 1
          this.type = 0
          this.rate = 0
          this.tagIdSet = new Set()
          this.title = new String()
          this.subtitle = new String()
          this.releaseDate = new Date()
          break
        case 1:
          this.subindexTableSelection = false
          this.subindexTableSelectIdSet = new Set()
          this.subindexMap = new Map()
          this.subindexSelectAll = false
          break
        case 2:
          this.fileTableSelection = false
          this.fileTableSelectIndexSet = new Set()
          this.fileList = []
          this.fileSelectAll = false
          break
        case 3:
          this.coverList = []
          break
        case 4:
          this.description = new String()
          break
      }
    },
    /* tag--author--start */
    async createTag(type, list) {
      if (type === 1) {
        const options = this.authorOptions
        for (let i = 0; i < list.length; i++) {
          const val = list[i]
          if (!this.tagIdSet.has(val)) {
            const id = await $MyLibDbc.tag.insert(new TagEntity(val, 1, type, new Date().getTime()))
            this.tagIdSet.add(id)
            list[i] = id
            options.push({ value: id, label: val, disabled: false })
          }
        }
        this.authorSet = new Set(list)
      }
      else {
        const options = this.tagOptions
        for (let i = 0; i < list.length; i++) {
          const val = list[i]
          if (!this.tagIdSet.has(val)) {
            const id = await $MyLibDbc.tag.insert(new TagEntity(val, 1, type, new Date().getTime()))
            this.tagIdSet.add(id)
            list[i] = id
            options.push({ value: id, label: val, disabled: false })
          }
        }
        this.tagSet = new Set(list)
      }
    },
    /* tag--author--end */
    /* cover--start */
    handleCoverPreview(index) {
      this.$refs.RefImgList.children[index].firstElementChild.firstElementChild.dispatchEvent(new MouseEvent('click'))
    },
    handleCoverDelete(index) {
      this.coverList.splice(index, 1)
    },
    async handleSelectImage() {
      const params = new Params()
      params.setIsMultiSelections()
      params.setIsOpenFile()
      params.setTitle('选择索引封面')
      params.setImgFilter()
      params.finsh()
      const result = await $Render.getImage(params)
      try {
        switch (result.state) {
          case 1:
            for (const val of result.value) {
              this.coverList.push(val)
            }
            break;
          case 2:
            break;
          case 0:
          default:
            throw result.value
        }
      } catch (e) {
        console.log(e)
      }
    },
    handleCoverSeqUp(index) {
      if (index > 0) {
        const temp = this.coverList[index]
        this.coverList[index] = this.coverList[index - 1]
        this.coverList[index - 1] = temp
      } else {
        this.coverList.push(this.coverList.shift())
      }
    },
    handleCoverSeqDown(index) {
      if (index === (this.coverList.length - 1)) {
        this.coverList.unshift(this.coverList.pop())
      } else {
        const temp = this.coverList[index]
        this.coverList[index] = this.coverList[index + 1]
        this.coverList[index + 1] = temp
      }
    },
    /* cover--end */
    /* file--start */
    fileNameDetail(item) {
      const val = []
      val.push('<div style="display: flex;flex-wrap: wrap;flex-direction: column;">')
      for (const key of Object.keys(item)) {
        const name = $MyLibFileFieldName.get(key)
        if (name)
          val.push(`<p><strong>${name}</strong>:&nbsp;${item[key]}</p>`)
      }
      val.push('</div>')
      ElMessageBox.alert(
        val.join(''),
        {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false,
          closeOnClickModal: true,
          showClose: false,
          draggable: true,
        }
      ).then(emptyFunction).catch(emptyFunction)
    },
    handleFileSelect(event, index) {
      if (event) {
        this.fileTableSelectIndexSet.add(index)
      } else {
        this.fileTableSelectIndexSet.delete(index)
      }
    },
    handleFileSelection() {
      this.fileTableSelection = !this.fileTableSelection
    },
    handleFileSelectAll() {
      this.fileSelectAll = !this.fileSelectAll
      if (this.fileSelectAll)
        for (let index = 0; index < this.fileList.length; index++)
          this.fileTableSelectIndexSet.add(index)
      else
        this.fileTableSelectIndexSet.clear()
    },
    async handleFileCreate() {
      const params = new Params()
      params.setIsMultiSelections()
      params.setIsOpenFile()
      params.setTitle('选择文件')
      params.finsh()
      const result = await $Render.getFile(params)
      try {
        if (result.state === 1) {
          for (const val of result.value) {
            this.fileList.push(val)
          }

        } else if (result.state === 0) {
          throw result.value
        }
      } catch (e) {
        console.log(e)
      }
    },
    handleFileListBatchDisassociation() {
      for (const i of this.fileTableSelectIndexSet) {
        this.fileList.splice(i, 1)
      }
      this.fileTableSelection = false
    },
    handleFileDisassociation(index) {
      this.fileList.splice(index, 1)
    },
    handleFileSeqUp(index) {
      if (index > 0) {
        const temp = this.fileList[index]
        this.fileList[index] = this.fileList[index - 1]
        this.fileList[index - 1] = temp
      } else {
        this.fileList.push(this.fileList.shift())
      }
    },
    handleFileSeqDown(index) {
      if (index === (this.fileList.length - 1)) {
        this.fileList.unshift(this.fileList.pop())
      } else {
        const temp = this.fileList[index]
        this.fileList[index] = this.fileList[index + 1]
        this.fileList[index + 1] = temp
      }
    },
    /* file--end */
    /* subindex--start */
    handleSubCreate() {
      $MyLibWindowCommunication.openWindow(
        'my-lib-index_edit.html',
        `sub_${new Date().getUTCMilliseconds().toString()}`
      ).catch(console.log).then(event => {
        this.subindexMap.set(event.data.id, event.data)
      })
    },
    handleSubIndexListBatchDisassociation() {
      for (const id of this.subindexTableSelectIdSet) {
        this.subindexMap.delete(id)
      }
      this.subindexTableSelection = false
    },
    handleSubindexSelect(value, id) {
      if (value) {
        this.subindexTableSelectIdSet.add(id)
      } else
        this.subindexTableSelectIdSet.delete(id)
    },
    handleSubindexSelectAll() {
      this.subindexSelectAll = !this.subindexSelectAll
      if (this.subindexSelectAll)
        for (const id of this.subindexMap.keys())
          this.subindexTableSelectIdSet.add(id)
      else
        this.subindexTableSelectIdSet.clear()
    },
    handleOpenSubindexLink() {
      const query = {}
      query.type = this.type
      if (this.subindexMap.size > 0) {
        query.sub_id_list = [...this.subindexMap.keys()]
      }
      $MyLibWindowCommunication.openWindow(
        'my-lib-filter_index_table.html',
        'filter_index_table')
        .catch(console.log)
        .then(event => {
          const list = event.data.values.map(str => JSON.parse(str))
          for (const item of list) {
            this.subindexMap.set(item.id, item)
          }
        })
    },
    handleSubindexTableSelection() {
      this.subindexTableSelection = !this.subindexTableSelection
    },
    handleSubindexDisassociation(item) {
      this.subindexMap.delete(item.id)
    },
    /* subindex--end  */
    fileNameDetail(item) {
      const val = []
      val.push('<div style="display: flex;flex-wrap: wrap;flex-direction: column;">')
      for (const key of Object.keys(item)) {
        const name = fileFieldName.get(key)
        if (name)
          val.push(`<p><strong>${name}</strong>:&nbsp;${item[key]}</p>`)
      }
      val.push('</div>')
      ElMessageBox.alert(
        val.join(''),
        {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false,
          closeOnClickModal: true,
          showClose: false,
          draggable: true,
        }
      ).then(emptyFunction).catch(emptyFunction)
    },
    indexNameDetail(item) {
      const val = []
      val.push('<div style="display: flex;flex-wrap: wrap;flex-direction: column;">')
      for (const key of Object.keys(item)) {
        const name = indexFieldName.get(key)
        if (name)
          val.push(`<p><strong>${name}</strong>:&nbsp;${item[key]}</p>`)
      }
      val.push('</div>')
      ElMessageBox.alert(
        val.join(''),
        // '详情',
        {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false,
          closeOnClickModal: true,
          showClose: false,
          draggable: true,
        }
      ).then(emptyFunction).catch(emptyFunction)
    }
  },
  computed: {
    urlList() {
      const list = []
      this.coverList.forEach(item => list.push(item.dir + '\\' + item.name + item.ext))
      return list
    }
  },
  data() {
    return {
      isSubindex: false,
      currentTabIndex: 0,
      windowIsFocus: 1,
      mainHeight: 0,
      /* author--start */
      authorOptions: new Array(),
      authorList: new Array(),
      authorSet: new Set(),
      /* author--end */
      /* tag--start */
      tagList: new Array(),
      tagSet: new Set(),
      tagOptions: new Array(),
      /* tag--end */
      /* base--start */
      isDropdownDisabled: false,
      state: 1,
      type: 1,
      rate: 0,
      tagIdSet: new Set(),
      title: new String(),
      subtitle: new String(),
      description: new String(),
      releaseDate: new Date(),
      /* base--end */
      /* cover--start */
      coverList: new Array(),
      /* cover--end */
      /* file--start */
      fileTableSelection: false,
      fileTableSelectIndexSet: new Set(),
      fileList: new Array(),
      fileListUqMap: new Map(),
      fileSelectAll: false,
      /* file--end */
      /* subindex--start */
      subindexTableSelection: false,
      subindexTableSelectIdSet: new Set(),
      subindexMap: new Map(),
      subindexSelectAll: false
      /* subindex--end */
    }
  }
}
</script>

<style>
html,
body,
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  text-align: center;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.window-blur {
  /* 未选中颜色 */
  background-color: #323233;
}

.window-focus {
  /* 未选中颜色 */
  background-color: #3C3C3C;
}

.lib-edit-base-form-item {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
}

.lib-edit-base-form-item-select {
  width: 100% !important;
}

.lib-edit-base-form-item .el-rate {
  height: auto !important;
  margin-left: 5px;
}

.lib-edit-base-form-item .el-dropdown {
  margin-top: 5px;
  margin-left: 5px;
}

.lib-edit-base-form-item-dropdown-menu,
.lib-edit-base-form-item-dropdown-menu span {
  display: flex;
  align-items: center;
  text-align: center;
}

.lib-edit-base-form-item .n-base-selection .n-base-selection-tags,
.lib-edit-base-form-item .el-textarea,
.lib-edit-base-form-item .el-input {
  --el-input-bg-color: rgb(60, 60, 60) !important;
  --n-color: rgb(60, 60, 60) !important;
  --el-input-border: 1px rgb(60, 60, 60) !important;
  --el-input-hover-border-color: #36ad6a !important;
}

.lib-edit-base-form-item-title {
  margin: 0;
  margin-bottom: 5px;
  text-align: left;
}

#lib-edit-base-form {
  padding-right: 20px;
  padding-left: 20px;
  width: 100%;
}

.lib-edit-base-form-item-group {
  display: flex;
  justify-content: space-between;
}

#lib-edit-header-button-group {
  display: flex;
  align-items: center;
  margin-right: 137px !important;
}

#lib-edit-header-button-group .el-button {
  -webkit-app-region: no-drag;
}

#lib-edit-header-button-group .el-button {
  margin: 0 !important;
}

#lib-edit-header-logo {
  display: flex;
  margin-left: 10px;
  align-items: center;
}

#lib-edit-header-logo .el-icon {
  margin-right: 10px;
}

#lib-edit-header {
  -webkit-app-region: drag;
  width: 100%;
  height: 33px;
  display: flex;
  justify-content: space-between;
}

#lib-edit-aside-tabs {
  display: flex;
}

#lib-edit-aside-tabs-header {
  display: flex;
  flex-direction: column;
  background: #3C3F41;
  font-size: 12px;
}

.lib-edit-aside-tabs-header-tab {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 5px;
  padding-left: 5px;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 12px;
  color: #BBBBBB;
}

.lib-edit-aside-tabs-header-tab-hover:hover {
  background-color: #353739;
}

.lib-edit-aside-tabs-header-tab-active {
  background-color: #2D2F30;
  color: white;
}

.lib-edit-aside-tabs-header-tab-title {
  transform: rotate(-90deg);
  white-space: nowrap;
  margin: 0 !important;
}

.lib-edit-aside-tab-pane {
  width: 100%;
  background-color: #1E1E1E;
}

.lib-edit-aside-current-tab-pane {
  display: flex;
}

.lib-edit-aside-uncurrent-tab-pane {
  display: none;
}

/* temp */
.el-message-box__header {
  padding: 0px !important;
}

.el-message-box__btns {
  padding: 0px !important;
}

#lib-edit-description {
  box-shadow: none;
  overflow-y: scroll;
  height: 100% !important;
  border-radius: 0;
}

.lib-edit-table {
  overflow-y: scroll;
  width: 100%;
  background-color: #1E1E1E;
}

.lib-edit-table-row {
  width: auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-color: #1E1E1E;
  cursor: pointer;
  border-bottom: 0.5px solid #252526;
}

.lib-edit-table-row-button-group .el-button {
  margin: 0;
}

.lib-edit-table-row-button-group {
  flex-wrap: nowrap;
  display: flex;
}

.lib-edit-table-row-box {
  padding-right: 5px;
  padding-left: 5px;
}

.lib-edit-table-row-lock {
  background-color: #350104;
}

.lib-edit-table-row-value {
  margin-left: 10px;
}

.lib-edit-table-row-main {
  display: flex;
  align-items: center;
}

.lib-edit-table-row-hover:hover {
  background-color: #333333;
}

#lib-edit-cover-box {
  overflow-y: scroll;
  width: 100%;
  padding: 5px;
}

#lib-edit-cover-box .el-upload-list--picture-card {
  --el-upload-list-picture-card-size: 100px !important;
}

#lib-edit-cover-box-list {
  display: flex;
  justify-content: space-between;
}

#lib-edit-cover-box-list .el-upload--picture-card {
  --el-upload-picture-card-size: 100px !important;
  --el-fill-color-lighter: rgb(60, 60, 60) !important;
}

#lib-edit-cover-box-list .el-upload-list--picture-card {
  --el-upload-list-picture-card-size: 100px !important;
}

#lib-edit-cover-box-list .el-upload-list__item {
  margin: 0 0 5px 0 !important;
}
</style>
